<template>
	<view class="cu-modal bottom-modal show">
		<view class="cu-dialog">
			<view class="cu-bar bg-white">
				<view class="action text-blue">取消</view>
				<view class="action text-blue" @tap="choseClearAll">已选择({{choseCount}}/{{count}})</view>
				<view class="action text-green">确定</view>
			</view>
			<view class="cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input v-model="refName" :adjust-position="false" type="text" placeholder="请输入姓名" confirm-type="search"></input>
				</view>
				<view class="action">
					<button class="cu-btn bg-green shadow-blur round" @tap="searchList">搜索</button>
				</view>
			</view>
			<scroll-view style="text-align:left;height: 50vh;" scroll-y="true" @scrolltolower="next">
				<checkbox-group @change="checkboxChange">
				<view v-for="val in list" class="cu-list menu" style="margin-top:0;border-top:1px solid #eee">
					<view class="cu-item" :class="menuArrow?'arrow':''">
						<label class="content" :for="'check' + val.id">
							<checkbox :id="'check' + val.id" style="transform:scale(0.7)" :class="val.checked" :checked="val.checked" :value="val.id"></checkbox>
							<text class="cuIcon-my text-grey"></text>
							<text class="text-grey">{{val.refName}} ({{val.loginCode}}) | {{val.refObj.office.fullName}}
							</text>
								<!-- <button class="cu-btn round bg-green shadow" style="transform:scale(0.8);float: right;">
									 选择</button> -->
						</label>
					</view>
				</view>
				</checkbox-group>
				<!-- <view v-for="(item,index) in checkbox" class="padding-xs" :key="index">
					<button class="cu-btn orange lg block" :class="item.checked?'bg-orange':'line-orange'" @tap="ChooseCheckbox"
					 :data-value="item.value"> {{item.name}}
						<view class="cu-tag sm round" :class="item.checked?'bg-white text-orange':'bg-orange'" v-if="item.hot">HOT</view>
					</button>
				</view> -->
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapActions} from 'vuex'
	export default{
		data() {
			return {
				CustomBar: this.CustomBar,
				modalName: null,
				radio: 'radio1',
				list: [],
				chose:"",
				count:0,
				pageNo:1,
				pageSize:20,
				refName: "",
				choseFlag:false
			};
		},
		mounted() {
			this.getList()
		},
		methods:{
			...mapActions(["JAjax"]),
			checkboxChange(val){
				this.chose = val.detail.value;
				console.log(this.chose)
			},
			getList(){
				uni.showLoading({
					title:"加载中",
					icon:"none"
				})
					this.JAjax({
						url: '/a/sys/empUser/listData?pageSize='+this.pageSize + "&pageNo="+this.pageNo + "&refName=" + this.refName,
						success: data=>{
							uni.hideLoading();
							if(data.data.pageNo == this.pageNo){
								if (data.statusCode == 200 && data.data) {
									if(this.list.length == 0){
										this.list = data.data.list;
									} else {
										this.list = this.list.concat(data.data.list);
									}
									this.count = data.data.count;
								}	
								this.checked()
							} else {
								uni.showToast({
									title:"没有更多的数据了",
									icon:"none"
								})
							}
							
						}
					});
			},
			next(){
				this.pageNo++;
				this.getList();
			},
			searchList(){
				this.list = []
				this.pageNo = 1
				this.getList();
			},
			checked(){
				this.list.forEach((val,key)=>{
					if(this.chose.toString().indexOf(val.id) != -1){
						val.checked = true;
					}
				})
			},
			choseClearAll(){
				this.choseFlag = !this.choseFlag;
				this.chose = ""
				this.list.forEach((val,key)=>{
					val.checked = this.choseFlag;
					if(this.choseFlag){
						if(this.chose == ""){
							this.chose += val.id;
						} else {
							this.chose +=  "," + val.id;
						}
					}
				})
				if(this.choseFlag){
					uni.showToast({
						title: '已全选',
						icon:"none"
					});
				} else {
					uni.showToast({
						title: '已清空',
						icon:"none"
					});
				}
			}
		},
		computed:{
			choseCount(){
				return this.chose == "" ? 0 : this.chose.toString().split(",").length;
			}
		}
	}
</script>

<style>
</style>
